<template>
    <div class="workbeanch-editor">
        <div class="workbeanch-editor-tags">
            <dbant-tags v-model:value="workbeanchTabs.activeTabData" :tabs="workbeanchTabs.tabs" @change="tagChangeHanle"
                className="magic-script-tab" ref="tab" :allow-close="true" @close="onClose">
                <template v-slot="{ tab }">
                    <span @contextmenu="contextMenuClick(tab, $event)"> {{ tab.title }}</span>
                </template>
            </dbant-tags>
        </div>

        <div class="workbeanch-editor-wrapper" v-for="tab in workbeanchTabs.tabs" v-show="tab.show">
            <component :is="tab.component" v-bind="tab.data" :ref="tab.setRef">
            </component>
        </div>


        <vue3-menus v-model:open="isOpen" :event="eventVal" :menus="menus" hasIcon>
            <template #icon="{ item: { activeIndex } }">{{ activeIndex }}</template>
            <template #label="{ item: { item } }">{{ item.label }}</template>
        </vue3-menus>
    </div>
</template>

<script>
import WorkbeanchSqlEditor from './workbeanch-sql-editor.vue'
import ExecuteResult from './resource/executeResult.vue'
export default {
    name: 'WorkbeanchEditor',
    components: {
        WorkbeanchSqlEditor: WorkbeanchSqlEditor,
        ExecuteResult: ExecuteResult
    }

};
</script>
<script setup>
import { ref, inject, nextTick, reactive, computed, watch } from 'vue'
import { WorkbeanchTab, WorkbeanchTabs } from "@/components/WorkbeanchTab.js";
const $bus = inject('$bus')
const $config = inject('$config')
const workbeanchTabs = reactive(ref(new WorkbeanchTabs()));
const isOpen = ref(true);
const eventVal = ref({});
const menus = ref([]);
const refreshKey = ref(null)
const componentBodyShow = (tab) => {
    return workbeanchTabs.value.activeTab == tab.id ? '' : 'none'
}



const contextMenu = (tab) => [
    {
        label: "刷新",
        click: () => {
           const t =workbeanchTabs.value.findTabById(tab.id)
            if(t.ref){
                t.ref.reload();
            }
        },
    },
    {
        label: "关闭",
        click: () => {
            workbeanchTabs.value.removeTab(tab.id)
        },
    },
    {
        label: "关闭左边",
        click: () => {
            workbeanchTabs.value.removeLeftTab(tab.id)
        },
    },
    {
        label: "关闭右边",
        click: () => {
            workbeanchTabs.value.removeRightTab(tab.id)
        },
    },
    {
        label: "关闭所有",
        click: () => {
            workbeanchTabs.value.clearTabs()
        },
    }
]

workbeanchTabs.value.addTab(new WorkbeanchTab({
    id: "query_init",
    type: '',
    title: "查询",
    edited: false,
    fixed: true,
    component: 'WorkbeanchSqlEditor',
    data: {}
}));

const hasWorkbeanchTab = computed(() => {
    return workbeanchTabs.value.tabs.length > 0
})

const onClose = (tab) => {
    workbeanchTabs.value.removeTab(tab.id)
};
const tagChangeHanle = (tab) => {
    workbeanchTabs.value.switchTab(tab.id)
}
$bus.$on($config.TAGS_EVENT_KEY, (event) => {
    if (event.type === 'add') {
        workbeanchTabs.value.addTab(event);
    }
});
const contextMenuClick = (tab, event) => {
    menus.value = contextMenu(tab)
    isOpen.value = false;
    nextTick(() => {
        eventVal.value = event;
        isOpen.value = true;
    });
    event.preventDefault();
}
</script>

<style lang="scss" scoped>
.workbeanch-editor {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .workbeanch-editor-tags {
        height: 30px;
        width: 100%;

        .workbeanch-editor-tag {
            display: flex;
            flex-direction: column;
        }
    }

    .workbeanch-editor-wrapper {
        // margin-top: 10px;
        flex: 1;
        padding: 10px 0px 0px 0px
    }

    .workbeanch-toolbar {
        flex-direction: column-reverse;
        width: 100%;
    }

}


.workbeanch-editor .sql-editor {
    position: relative;
    flex: 1;
}

.sql-editor .magic-monaco-editor-wrapper {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
}

.workbeanch-toolbar .magic-navbar {
    display: flex;
    flex-direction: column-reverse;
    flex: 1;

    ul {
        margin: 0px 0px
    }
}
</style>